<template>
  <p class="subjectName">{{ route.query.name }}</p>

  <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="160px">
    <el-row>
      <el-form-item label="省" prop="provinceId">
        <el-select v-model="queryParams.provinceId" @change="chooseProvince" clearable>
          <el-option v-for="item in provinceData" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="市" prop="cityId">
        <el-select v-model="queryParams.cityId" @change="chooseCity" clearable>
          <el-option v-for="item in cityData" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
    </el-row>
    <el-form-item label="区/县" prop="countyId">
      <el-select v-model="queryParams.countyId" @change="chooseCounty" clearable>
        <el-option v-for="item in areaData" :key="item.id" :label="item.name" :value="item.id">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item :label="numName" prop="number" v-if="numName">
      <el-input v-model="queryParams.number" clearable></el-input>
    </el-form-item>
    <el-row>
      <el-form-item label=" ">
        <el-button type="primary" @click="query">查询</el-button>
        <el-button plain @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-row>
  </el-form>

  <el-divider></el-divider>

  <QueryTable ref="queryTable" v-model:addDrawer="addDrawer" :queryParams="queryParams" @loadingChange="loadingChange">
  </QueryTable>

  <router-view></router-view>
</template>
<script setup>
import useOtherData from '@/hooks/useOtherData'
import QueryTable from './queryTable.vue'
import { treeData } from '@/views/businessManage/common/propertyTree'

const { queryData, chooseProvince, chooseCity, chooseCounty, addDrawer } = useOtherData()
const { queryParams, provinceData, cityData, areaData } = toRefs(queryData)
const { proxy } = getCurrentInstance()
const route = useRoute()
const props = defineProps({
  loading: Boolean,
  curKey: String
})
const emits = defineEmits()
// 查询
const query = () => {
  proxy.$refs.queryTable.handQuery()
}
// 重置
const resetQuery = () => {
  queryParams.value.page = 1
  proxy.resetForm('queryRef')
  queryParams.value.province = ''
  queryParams.value.city = ''
  queryParams.value.county = ''
  proxy.$refs.queryTable.handQuery()
}
const loadingChange = () => {
  emits('update:loading', false)
}
const numName = ref('')
watch(() => route, () => {
  nextTick(() => {
    treeData.find(item => {
      let curObj = item.children.find(itemChild => itemChild.pathName == route.query.curKey)
      if(curObj) numName.value = curObj.numName
    })
    const { curKey, detailId } = route.query
    if (route.name == 'otherData' && curKey && !detailId) {
      !route.params.noRefresh && proxy.$refs.queryTable?.handQuery()
    }
  })
}, { immediate: true, deep: true })
</script>
<style scoped>
.subjectName {
  text-align: center;
  background: #e5ebf7;
  padding: 10px 0;
  font-weight: bold;
}
</style>